<template>
<!-- 店铺管理 -->
  <div class="shop-app">
   
      <div  class="shop-header">
          <span>店铺管理</span>
          <el-button size="small" type="success" @click="saveShopData">保 存</el-button>
      </div>

       <el-card>
         <div class="content">
          <el-form label-width="80px" :model="shopForm" :rules="rules" ref="shopForm">
            <el-form-item label="店铺名称"  prop="name">
              <el-input v-model="shopForm.name"></el-input>
            </el-form-item>
            <el-form-item label="店铺公告" prop="bulletin">
              <el-input v-model="shopForm.bulletin" type="textarea" rows="4"></el-input>
            </el-form-item>
            <el-form-item label="店铺头像"  prop="avatar">
                <el-upload
                  class="avatar-uploader"
                  :action="action"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="shopForm.avatar" :src="shopForm.avatar" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="店铺图片" prop="pics">
                    <el-upload
                      :action="action"
                      list-type="picture-card"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :on-success="handleSuccess"
                      :file-list="shopForm.pics">
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
            </el-form-item>
            <el-form-item label="配送费" prop="deliveryPrice">
              <el-input-number v-model="shopForm.deliveryPrice" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="起送价格" prop="minPrice">
              <el-input-number v-model="shopForm.minPrice" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="配送时间"  prop="deliveryTime">
              <el-input-number v-model="shopForm.deliveryTime" :min="20"></el-input-number>
            </el-form-item>
            <el-form-item label="配送描述"  prop="description">
              <el-input v-model="shopForm.description" type="textarea" rows="4"></el-input>
            </el-form-item>
            <el-form-item label="店铺评分">
             <el-rate
              v-model="shopForm.score"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}">
            </el-rate>
            </el-form-item>
            <el-form-item label="店铺销量"> 
            <!-- 设置span只读 防止别改代码 -->
            <span>{{shopForm.sellCount}}</span>
            </el-form-item>
            <el-form-item label="店铺活动">
              <el-checkbox-group v-model="shopForm.supports">
                <el-checkbox label="在线支付满28减15" name="type"></el-checkbox>
                <el-checkbox label="VC无限橙果汁全场8折" name="type"></el-checkbox>
                <el-checkbox label="单人精彩套餐" name="type"></el-checkbox>
                <el-checkbox label="单人特色套餐" name="type"></el-checkbox>
                <el-checkbox label="特价饮品8折购" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="营业时间"  prop="date">
                <el-time-picker
                  is-range
                  arrow-control
                  v-model="shopForm.date"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                  style="width:400px"
                  value-format="HH:mm:ss">
                </el-time-picker>
            </el-form-item>    
          </el-form>
         </div>
    </el-card>
  </div>
</template>

<script>
import {shopInfo,shopEdit} from '@/api/shop'
export default {
  data(){
    return{
        shopForm:{//表单店铺信息
            name:"",//店铺名称
            bulletin:"",//店铺公告
            avatar:"",//店铺头像
            deliveryPrice:"",//配送费
            deliveryTime:"",//送达时间
            description:"",//描述
            score:2,//评分
            sellCount:0,//销量
            supports:[],//活动 数组 []
            pics:[],//店铺图片 数组 []
            date:[new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],//营业时间 数组 []
            minPrice:0,//起送价格        
        },
        action:"http://127.0.0.1:5000/shop/upload",//店铺头像上传地址
        dialogVisible:false,//店铺图片上传显示隐藏
        dialogImageUrl:"",//店铺图片上传地址
        //验证规则
      rules: {
        //店铺名称
        name: [
          // message  提示店铺名称
          { required: true, message: "请输入店铺名称", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符", //错误提示
            trigger: "blur", //失去焦点触发
          },
        ],
        //店铺公告
        bulletin:[
          { required: true, message: "请输入店铺公告", trigger: "blur" },
          { min: 2, max: 100, message: "长度在 2 到 100个字符", //错误提示 
          trigger: "blur", //失去焦点触发
          },
        ],
        //店铺头像
        avatar:
        [{ required: true, message: "请输入店铺头像", trigger: "blur" },],
        //店铺图片
        pics: [{ required: true, message: "请输入店铺图片", trigger: "blur" },],
        //配送费
        deliveryPrice: [{ required: true, message: "请输入配送费", trigger: "blur" },],
        //起送价格
        minPrice:[ { required: true, message: "请输入起送价格", trigger: "blur" },],
        //配送时间
        deliveryTime:[ { required: true, message: "请输入配送时间", trigger: "blur" },],
        //配送描述
        description:[ { required: true, message: "请输入配送描述", trigger: "blur" },],
        //营业时间
        date:[ { required: true, message: "请输入营业时间", trigger: "blur" },],
       
      
      },
    }
  },
  //方法
  methods:{
      async loadData(){
       let res = await shopInfo();
      //  console.log(res);//打印响应数据
       //处理照片墙格式(把现在的格式---覆盖成---后端店铺图片格式)
       //"pics":["http://xxx/004.jpg","http://xxx/004.jpg",],//后端店铺图片格式
       //[{name : '004.jpg',url:'http://xxx/004.jpg'}] //现在店铺图片的格式
       //map()结果是一个数组[]
      res.data.pics=res.data.pics.map((item)=>{
        let index = item.lastIndexOf("/");//从后往前找到/的索引
        return {name:item.substr(index+1),url:item};
      })
       this.shopForm=res.data;//替换表单店铺信息
      },
      //上传成功
      handleAvatarSuccess(res){
      // console.log(res);//响应信息
      //显示上传的图片 回填显示
      this.shopForm.avatar=res.imgUrl
     },
      //商品图片上传成功之前的处理函数  设置上传规则
      beforeAvatarUpload(file){
        const isJPG = file.type === 'image/jpeg'||file.type === 'image/png'||file.type === 'image/gif'||file.type === 'image/webp';
        const isLt2M = file.size / 1024 / 1024 < 10;

        if (!isJPG) {
          this.$message.error('头像图片仅支持 JPG|PNG|GIF|WEBP 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 10MB!');
        }
        return isJPG && isLt2M;

      },

      //店铺图片 删除
      handleRemove(file) {
         console.log(file,);
         let name = file.name
         let index = this.shopForm.pics.findIndex(item=>item.name==name)//找到店铺图片里面每张图片符合名字的图片,返回这张图片所在的索引
         //根据name删除数据
         this.shopForm.pics.splice(index,1)//根据索引删除数组
        //  fileList
      },
      //店铺图片 预览放大
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //店铺图片 上传成功
      handleSuccess(res){
          console.log(res);//成功响应的参数
          //"http://127.0.0.1:5000/imgs/1647523076691.jpg" //把上传的店铺图片变为
          //[{name : '004.jpg',url:'http://xxx/004.jpg'}] //现在店铺图片的格式
          let index = res.imgUrl.lastIndexOf("/");//从后往前找到/的索引
          let name =res.imgUrl.substr(index+1); //截取  
          this.shopForm.pics.push({name:name,url:res.imgUrl})
          // console.log(this.shopForm.pics);//打印店铺图片数组检查是否追加成功
      },

      //保存按钮
      async saveShopData(){
         this.$refs.shopForm.validate(async (valid) => {
        //点击提交按钮  找到表单  用validate()方法  表单都有值就是true
        if (valid) {

    
        // console.log(this.shopForm); 
        //1.保证参数正确再发送ajax

        //深拷贝标表单数据
        let paramsObj=JSON.parse(JSON.stringify(this.shopForm))//深拷贝--->对象---转为--->字符串---转为---对象--->新地址
        //后端 avatar 需求是提交店面头像图片的名字
        //处理店铺头像名字------------------------------------------------------
        let index = paramsObj.avatar.lastIndexOf("/")//  从后往前找到/的索引
        paramsObj.avatar= paramsObj.avatar.substr(index+1)//截取 

        //处理店铺图片名字-----是一个数组[]-------------------------------------------------

        //map()结果是一个数组[]
        paramsObj.pics=paramsObj.pics.map(item=>item.name)//找到原来数组子元素所有name的值，用map组成一个新数组，再赋值

        // console.log(paramsObj);//paramsObj  新的表单数据

        //2.所有参数正确，发送ajax
        let res = await shopEdit(paramsObj);

        let {code,msg}=res;

        if(code==0){
            this.$message({
              type:"success",
              message:msg,
            })
        }else{
          this.$message.error(msg);
        }

      }else{
        this.$message.error("请补全信息!");
      }
        })
      }  
  },
  //生命周期
  created(){
      this.loadData();
  }
};
</script>

<style lang="less" scoped>
//头部
.shop-header{
  display: flex;
  justify-content: space-between;
  position:sticky;
  background-color: rgb(255, 255, 255);
  padding: 20px;
  top: 0;
  box-shadow: 0px 0px 5px 0px #9f9fa0;
  border-radius: 3px ;
  z-index: 50;
  &:hover{
     box-shadow: 0px 0px 5px 0px #4da0ff;
  }
    button:hover{
     box-shadow: 0px 0px 5px 0px #83cf79;
  }
}
//内容
.el-card{
   border-radius: 0px 0px 3px 3px;
    box-shadow: 0px 0px 5px 0px #9f9fa0;
}
.content{
  width: 480px;
  margin-left: 30px;
  margin-bottom: 200px;

}
//评分
.el-rate{
  margin-top: 10px;
}
.shop-app{
  margin-bottom: 500px;
}

//店铺头像
 /deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 128px;
    height: 128px;
    line-height: 128px;
    text-align: center;
  }
  .avatar {
    width: 128px;
    height: 128px;
    display: block;
  }
</style>